<template>
	<view class="">
		<view class="recommend bg-color">
			<view class="recommend-item" v-for="(item,index) in indexRecommend" :key="item.id">
				<image class="item-big" :src="item.item_big" mode=""></image>
				<view class="item-small">
					<image class="item-img" v-for="(item_s,index_s) in item.item_small" :key="item_s.id"
						:src="item_s.item_img" mode=""></image>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		props: {
			indexRecommend: {
				type: Array,
				default: []
			}
		}
	}
</script>

<style lang="scss">
	.recommend {
		padding: 15rpx;

		.recommend-item {
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			border: 1rpx solid #CCCCCC;
			margin: 20rpx 0;
			overflow: hidden;

			.item-big {
				width: 100%;
				height: 350rpx;

			}

			.item-small {
				.item-img {
					display: inline-block;
					width: 33.333%;
					height: 240rpx;
				}
			}
		}
	}
</style>